<template>
<!-- 设计专家 -->
  <div>
    <title-name title="考察设计专家信息"></title-name>
    <a-form-model :model="expertList" :rules="validRules" ref="validForm">
      <a-row>
        <a-col :md="8" :sm="8">
          <a-form-model-item
                  label="考察设计资源名称"
                  :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                  :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
            <BaseInput v-model="expertList.surveyName" disabled
                    placeholder="请输入" />
          </a-form-model-item>
        </a-col>
        <a-col :md="8" :sm="8">
          <a-form-model-item
                  label="联系电话"
                  :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                  :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }" prop="tel">
            <BaseInput  v-model="expertList.tel" :disabled="type=='view'|| type=='approve'"
                    placeholder="请输入" />
          </a-form-model-item>
        </a-col>
        <a-col :md="8" :sm="8">
          <a-form-model-item
                  label="邮箱"
                  :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                  :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }" prop="email">
            <BaseInput v-model="expertList.email" :disabled="type=='view'|| type=='approve'"
                    placeholder="请输入" />
          </a-form-model-item>
        </a-col>
        <a-col :md="8" :sm="8">
          <a-form-model-item
                  label="毕业院校"
                  :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                  :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
            <BaseInput  v-model="expertList.graduateSchool" :disabled="type=='view'|| type=='approve'"
                    placeholder="请输入" />
          </a-form-model-item>
        </a-col>
        <a-col :md="8" :sm="8">
          <a-form-model-item
                  label="最高学历"
                  :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                  :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
                    <a-select placeholder="请选择" :getPopupContainer="getPopupContainer"  v-model="expertList.maxEducationId" :disabled="type=='view'|| type=='approve'">
                      <a-select-option v-for="item in educationList" :key="item.id">{{item.name}}</a-select-option>
                    </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :md="8" :sm="8">
          <a-form-model-item
                  label="单位职务"
                  :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                  :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
            <BaseInput  v-model="expertList.profession" :disabled="type=='view'|| type=='approve'"
                    placeholder="请输入" />
          </a-form-model-item>
        </a-col>
        <a-col :md="8" :sm="8">
          <a-form-model-item
                  label="所属专家库名称"
                  :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                  :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
            <BaseInput  v-model="expertList.evaluate" :disabled="type=='view'|| type=='approve'"
                    placeholder="请输入"  />
          </a-form-model-item>
        </a-col>
        <a-col :md="8" :sm="8">
          <a-form-model-item
                  label="职称"
                  :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                  :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
                    <a-select placeholder="请选择" :getPopupContainer="getPopupContainer" v-model="expertList.jobTitleId" :disabled="type=='view'|| type=='approve'">
                      <a-select-option v-for="item in titleList" :key="item.id">{{item.name}}</a-select-option>
                    </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :md="16" :sm="16">
          <a-form-model-item
                  label="工作单位"
                  :labelCol="{ lg: { span: 3 }, sm: { span: 3 } }"
                  :wrapperCol="{ lg: { span: 20 }, sm: { span: 20 } }">
            <BaseInput  v-model="expertList.employer" :disabled="type=='view'|| type=='approve'"
                    placeholder="请输入" />
          </a-form-model-item>
        </a-col>
        <a-col style="margin-left:10px" :md="3" :sm="3">
          <a-button :disabled="type=='view'|| type=='approve'" type="primary" @click="clickBtn">从设计资源库中选择</a-button>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-model-item
                  label="注册证书情况"
                  :labelCol="{ lg: { span: 2 }, sm: { span: 2 } }"
                  :wrapperCol="{ lg: { span: 22 }, sm: { span: 22 } }">
            <BaseTextarea  v-model="expertList.certificateInfo" placeholder="请输入" :disabled="type=='view'|| type=='approve'" />
          </a-form-model-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-model-item
                  label="获得奖项情况"
                  :labelCol="{ lg: { span: 2 }, sm: { span: 2 } }"
                  :wrapperCol="{ lg: { span: 22 }, sm: { span: 22 } }">
            <BaseTextarea  v-model="expertList.rewardInfo" placeholder="请输入" :disabled="type=='view'|| type=='approve'" />
          </a-form-model-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-model-item
                  label="科研成果"
                  :labelCol="{ lg: { span: 2 }, sm: { span: 2 } }"
                  :wrapperCol="{ lg: { span: 22 }, sm: { span: 22 } }">
            <BaseTextarea  v-model="expertList.scientificInfo" placeholder="请输入"  :disabled="type=='view'|| type=='approve'"/>
          </a-form-model-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-model-item
                  label="参编规范/标准情况"
                  :labelCol="{ lg: { span: 2 }, sm: { span: 2 } }"
                  :wrapperCol="{ lg: { span: 22 }, sm: { span: 22 } }">
            <BaseTextarea  v-model="expertList.standardInfo"  placeholder="请输入"  :disabled="type=='view'|| type=='approve'"/>
          </a-form-model-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-model-item
                  label="发表论文/著作情况"
                  :labelCol="{ lg: { span: 2 }, sm: { span: 2 } }"
                  :wrapperCol="{ lg: { span: 22 }, sm: { span: 22 } }">
            <BaseTextarea  v-model="expertList.paperInfo" placeholder="请输入" :disabled="type=='view'|| type=='approve'" />
          </a-form-model-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-model-item
                  label="专业能力情况"
                  :labelCol="{ lg: { span: 2 }, sm: { span: 2 } }"
                  :wrapperCol="{ lg: { span: 22 }, sm: { span: 22 } }">
            <BaseTextarea  v-model="expertList.professionalAbility" placeholder="请输入" :disabled="type=='view'|| type=='approve'" />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    

    <title-name title="近三年主要业绩"></title-name>
      <div>
        <a-row>
          <div class="table-operator">
            <a-row>
              <a-col :md="24" :sm="24">
                <a-button  :disabled="type=='view'|| type=='approve'" type="primary"  @click="goAdd()">新增</a-button>
                <a-button  :disabled="type=='view'|| type=='approve'" type="info"  @click="goDel()">删除</a-button>
              </a-col>
            </a-row>
          </div>
          <a-table
                  rowKey="id"
                  :columns="columns2"
                  :rowSelection="archiveSelection"
                  :data-source="expertList.achievementsDTO">
            
            <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
            
            <span slot="action" slot-scope="text, record, index" v-if="type=='add'|| type=='edit'">
                  <template>
                  <a  @click="handleEdit(record, index)">编辑</a>
                  </template>
                </span>
          </a-table>
        </a-row>
      </div>
    <a-modal width="1000px" v-model="visible" title="新增近三年业绩"  @cancel="handleCancel" @ok="addArchive">
      <a-form-model ref="businessForm" :model="archive" :rules="businessRules">
        <a-row>
          <a-col :md="12" :sm="12">
            <a-form-model-item
                    label="工程名称"
                    :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
                    prop="name"
                    >
              <BaseInput v-model="archive.name"  placeholder="请输入"  :disabled="type=='view'|| type=='approve'"/>
            </a-form-model-item>
          </a-col>
          <a-col :md="12" :sm="12">
            <a-form-model-item
                    label="总承包单位"
                    :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
                    prop="contractor"
                    >
              <BaseInput v-model="archive.contractor"  placeholder="请输入"  :disabled="type=='view'|| type=='approve'"/>
            </a-form-model-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-model-item
                    label="项目类型/项目规模"
                    :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
                    prop="scale"
                    >
              <BaseTextarea v-model="archive.scale"  placeholder="请输入"  :disabled="type=='view'|| type=='approve'"/>
            </a-form-model-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-model-item
                    label="主要负责工作内容"
                    :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
                    prop="content"
                    >
              <BaseTextarea v-model="archive.content"  placeholder="请输入"  :disabled="type=='view'|| type=='approve'"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>

    <!-- 设计资源库 -->
    <a-modal width="1000px" v-model="visibleRecommand" @ok="handleRecommandOk" @cancel="handleCancelRecommand" title="选择设计资源" >
      <a-form-model :model="searchQuery">
        <a-row>
          <a-col :md="12" :sm="12">
            <a-form-model-item
                    label="资源名称"
                    :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
              <BaseInput v-model="searchQuery.designResourceName" placeholder="请输入" />
            </a-form-model-item>
          </a-col>
          <a-col :md="12" :sm="12">
            <a-form-model-item
                    label="设计资源等级"
                    :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                    :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
              <a-select allowClear :getPopupContainer="getPopupContainer" v-model="searchQuery.resLevelId" >
                <a-select-option v-for="item in recommendLevelOption" :key="item.id" :value = "item.id">{{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :md="12" :sm="12">
            <a-form-model-item label="分公司"
                          :labelCol="{lg: {span: 6}, sm: {span:6}}"
                          :wrapperCol="{lg: {span: 18}, sm: {span: 18} }">
              <SelectSubCompany allowClear placeholder="请选择" v-model="searchQuery.branchId" :getAll="true" :extraQuery="{'tagCodes': ['BC','CO'] }" :disabled="type=='view'"></SelectSubCompany>
            </a-form-model-item>
          </a-col>
          <a-col :md="12" :sm="12" >
            <div style="float:right">
              <a-button style="margin:0 20px" type="primary" @click="getDesignResourcesList">搜索</a-button>
              <a-button  @click="getReset">重置</a-button>
            </div>
          </a-col>
        </a-row>
      </a-form-model>
      <a-table
          :columns="columns1"
          :rowSelection="recommandSelection"
          :data-source="recommandLists"> 
        <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
    
        <span slot="action" slot-scope="text, record">
          <template>
          <a @click="handleSelectSub(record)">选择</a>
          </template>
        </span>
      </a-table>
    </a-modal>
        <a-button style="float:right;margin-top:10px;margin-right:10px"  @click="save()" type="primary">下一步</a-button>

  </div>
  
</template>

<script>
  import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
  import { getTypesLabel} from '@/api/commons'
  import { getList , addList , editExpert } from '@/api/design/investigate/expert'
  import { getDesignResourcesList } from '@/api/design/parameter'
  import {deleteSurvey} from '@/api/design/investigate/index'
  import { getThreeYearsArchive , addThreeYearsArchive , editThreeYearsArchive , deleteThreeYearsArchive } from '@/api/design/investigate/expert'
  import { isEmail, isPhone, createValidator} from '@/utils/regExpression'
  const columns2 = [
    {
      title: '序号',
      scopedSlots: { customRender: 'serial' }
    },
    {
      title: '工程名称',
      dataIndex: 'name',
      ellipsis: true,
    },
    {
      title: '项目类型/项目规模',
      dataIndex: 'scale',
      ellipsis: true,
    },
    {
      title: '总承包单位',
      dataIndex: 'contractor',
      ellipsis: true,
    },
    {
      title: '主要负责工作内容',
      dataIndex: 'content',
      ellipsis: true,
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '150px',
      scopedSlots: { customRender: 'action' }
    }
  ]  
  const columns1 = [
    {
      title: '序号',
      scopedSlots: { customRender: 'serial' }
    },
    {
      title: '设计资源名称',
      dataIndex: 'name',
      ellipsis: true,
    },
    {
      title: '资源类型',
      dataIndex: 'resTypeName',
      ellipsis: true,
    },
    {
      title: '资源等级',
      dataIndex: 'resLevelName',
      ellipsis: true,
    },
    {
      title: '分公司',
      dataIndex: 'branchName',
      ellipsis: true,
    },
  ]
  export default {
    name:'a'+ Date.now(),
    components:{
      SelectSubCompany
    },
    props: {
      resList: {},
      expertList: {
        type: Object,
        default() {
          return {
            employer: ''
          }
        }
      }
    },
    data(){
      this.columns2 = columns2
      return{
        validRules: {
          tel: [{ validator: createValidator(isPhone, '手机号格式不正确', false,this.validChanged), trigger: 'blur'}],
          email: [{ validator: createValidator(isEmail, '邮箱格式不正确', false, this.validChanged), trigger: 'blur'}]
        },
        businessRules: {
          name: [ { required: true, message: '请输入', trigger: 'change'} ],
          contractor: [ { required: true, message: '请输入', trigger: 'change'} ],
          scale: [ { required: true, message: '请输入', trigger: 'change'} ],
          content: [ { required: true, message: '请输入', trigger: 'change'} ]
        },
        editTargetIndex: null, // 编辑目标在表格中的序号
        remark:'',
        form:{},
        visibleRecommand:false,
        loading:false,
        selectVisible:false,
        titleList:[],
        recommendLevelOption:[],
        columns1,
        disabled:false,
        type:'',
        educationList:[],
        searchQuery:{},
        dataSource:[],
        recommandLists:[],
        tableData:[],
        visible:false,
        archive:{},
        archiveList:[],
        selectedArchiveKeys:[],
        selectedArchive:[],
        selectedRecommandKeys:[],
        selectedRecommand:[],
        id:'',
      }
    },
    created() {
      this.getTypesLabel()
      this.id = this.$route.query.id
      this.type=this.$route.query.type
      console.log(this.expertList)
    },
    mounted() {
      console.log('Mounted')
    },
    updated() {
      console.log('Updated')
      console.log('this.expertList', this.expertList)
    },
    computed: {
      rowSelection() {
        return {
          selectedRowKeys: this.selectedRowKeys,
          selectedRows: this.selectedRows,   // 当前行所有数据
          onChange: this.onSelectChange
        }
      },
      archiveSelection(){
        return {
          selectedRowKeys: this.selectedArchiveKeys,
          selectedRows: this.selectedArchive,   // 当前行所有数据
          onChange: this.onArchiveSelectChange
        }
      },
      recommandSelection(){
        return {
          type:'radio',
          selectedRowKeys: this.selectedRecommandKeys,
          selectedRows: this.selectedRecommand,   // 当前行所有数据
          onChange: this.onRecommandSelectChange
        }
      },
    },
    methods:{
      validChanged(data) {
        this.$emit('validChanged', data)
      },
      /**
       * @description 生成记录ID
       */
      createRecordId() {
        const timeStamp = (new Date()).getTime()
        return `fakeId${timeStamp}`
      },
      getReset(){
        this.searchQuery = this.$options.data().searchQuery
        if(this.expertList.resTypeName=='设计专家'){
          this.searchQuery.resTypeName='设计单位'
        }
        this.getDesignResourcesList()
      },
      handleOkSelect(){},
      handleCancelSelect(){},
      clickBtn(){
        this.selectedRecommandKeys = []
        this.selectedRecommand = []
        this.visibleRecommand = true
        this.getDesignResourcesList()
      },
      handleCancelRecommand() {
        let _this = this;
        _this.visibleRecommand = false
        this.searchQuery = this.$options.data().searchQuery
        if(this.expertList.resTypeName=='设计专家'){
          this.searchQuery.resTypeName='设计单位'
        }else if(this.expertList.resTypeName=='海外设计专家'){
          this.searchQuery.resTypeName='海外设计单位'
        }
      },
      onSelectChange(selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      // getList(){
      //   getList({id:this.id}).then((res)=>{
      //     this.expertList = res.data
      //   })
      // },
      getDesignResourcesList(){
        if(this.expertList.resTypeName=='设计专家'){
          this.searchQuery.resTypeName='设计单位'
        }else if(this.expertList.resTypeName=='海外设计专家'){
          this.searchQuery.resTypeName='海外设计单位'
        }
        getDesignResourcesList(this.searchQuery).then(res=>{
          this.recommandLists = res.data
        })
      },
      getPopupContainer(triggerNode){
        return  triggerNode.parentNode
      },
      onArchiveSelectChange(selectedArchiveKeys, selectedArchive) {
        this.selectedArchiveKeys = selectedArchiveKeys
        this.selectedArchive = selectedArchive
      },
      onRecommandSelectChange(selectedRecommandKeys, selectedRecommand) {
        this.selectedRecommandKeys = selectedRecommandKeys
        this.selectedRecommand = selectedRecommand[0]
      },
      goAdd(){
        this.editTargetIndex = null // 重置编辑目标的序号
        this.visible = true 
        this.archive = {}
      },
      handleRecommandOk(){
        let that = this;
        that.expertList.employer = that.selectedRecommand.name
        that.visibleRecommand = false
      },
      save(){
        if(this.expertList.achievementsDTO){
          this.expertList.achievementsDTO.forEach(item=>{
            if(item.id){
              item.id=null
            } 
          })
        }
        this.expertList.achievementsDTO = this.expertList.achievementsDTO
        console.log(this.expertList)
        if(this.id){
          this.expertList.surveyId=this.id
        }else{
          this.expertList.surveyId = this.resList.id
        }
        console.log(this.expertList)
        this.$emit("submitExpert",this.expertList)
      },
      getTypesLabel(){
        // 职称
        getTypesLabel({type:'15'}).then(res=>{
          this.titleList = res.data
        })
        // 学历
        getTypesLabel({type:'16'}).then(res=>{
          this.educationList = res.data
        })
        // 评级
        getTypesLabel({type:'13'}).then(res=>{
          this.recommendLevelOption = res.data
        })
      },
      //新增
      addArchive(){
        this.$refs.businessForm.validate(valid => {
        if(!valid) return
        this.visible = false
        const list = this.expertList.achievementsDTO
        if(this.editTargetIndex !== null) {
          list.splice(this.editTargetIndex, 1, this.archive)
        } else {
          list.push({
            ...this.archive,
            id: this.createRecordId()
          })
        }
        })
      },
      getThreeYearsArchive(){
        getThreeYearsArchive({id:this.id}).then(res=>{
          this.dataSource = res.data
        })
      },
      handleEdit(record, index){
        this.editTargetIndex = index
        this.visible = true
        this.archive = {...record}
      },
      goDel(){
        if(this.selectedArchive.length==0){
          this.$message.error("请先选择需要删除的近三年主要业绩！")
        }else{
          let _this = this
          _this.$confirm({
            title: '警告提醒！',
            content: '确定删除所选近三年主要业绩？',
            okType: 'danger',
            onOk() {
              _this.selectedArchive.forEach(delItem=>{
                console.log(delItem)
                _this.expertList.achievementsDTO = _this.expertList.achievementsDTO.filter(items=>items.id!=delItem.id)
                console.log(_this.expertList.achievementsDTO)
              })
              _this.selectedArchive = []
              _this.selectedArchiveKeys = []
            },
            onCancel() {
              console.log("取消删除")
            },
          })
        }
      },
      handleCancel(){
        this.visible = false
        this.$refs.businessForm.clearValidate()
      }
    }
  }
</script>

<style scoped>

</style>
